<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
        <div id="getDate">ajax</div>
</body>

</html>
<script>
    /*
     *responseType 返回响应数据的类型 可手动设置返回类型 为""空字符串时 他将使用默认的text类型  
                   你告诉服务器让服务器返回什么样的类型数据给你 
                   常用的是json js对象 解析得到的从服务器返回来的JSON字符串
    */
    //发送Ajax请求，返回的结果是promise对象
    function sendAjax(url) {
        return new Promise((resolve, reject) => {
              const x = new XMLHttpRequest();              //1.创建对象
                    x.responseType = "json";               //设置返回数据类型          
                    x.open("GET", url);                    //2.初始化 Get请求   
                    //3.发送
                    x.send();
                    //4.事件绑定
                    x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    //状态判断
                    if (x.status >= 200 && x.status < 300) {
                        //成功啦
                        resolve(x.response)
                    } else {
                        reject(x.respone)
                    }
                }
            }
        })
    }

    //promise then 测试
    const result = sendAjax("https://api.apiopen.top/getJoke")
    .then(value => {
        console.log("方法1",value)
        let {result} = value;
        console.log('解构赋值拿取',result) //数据解构 
    }, reason => { })

    //async 与 await 测试
    async function main() {
        //发送Ajax请求
        let result = await sendAjax("https://api.apiopen.top/getJoke")
        console.log("方法2",result)
    }
    main()

    //放在一个按钮上面 
    let getDate = document.getElementById("getDate");
    getDate.onclick = ()=>{
        const result = sendAjax("https://api.apiopen.top/getJoke").then(value => {
             console.log("绑定事件拿去数据",value)
        }, reason => {})
    }
</script>